<template>
  <div class="main">
    <el-row>
      <el-col :span="11">
        概念板块指数
      </el-col>
      <el-col :span="13">
        概念板块【{{ conceptBoardName }}】的成份股
      </el-col>
    </el-row>

    <el-divider />

    <el-row>
      <el-col :span="11">
        <el-button type="primary" @click="handlePreviousDate">前一天</el-button>
        <el-date-picker v-model="transactionDate" type="date" placeholder="选择日期" @change="changeTransactionDate">
        </el-date-picker>
        <el-button type="primary" @click="handleNextDate">后一天</el-button>

        <el-radio-group v-model="conceptBoardIndexTop5OrderBy" @change="changeConceptBoardIndexTop5OrderBy">
          <el-radio label="UP_DOWN_PERCENTAGE_2">最近2天涨跌百分比</el-radio>
          <el-radio label="UP_DOWN_PERCENTAGE_3">最近3天涨跌百分比</el-radio>
          <el-radio label="UP_DOWN_PERCENTAGE_4">最近4天涨跌百分比</el-radio>
          <el-radio label="UP_DOWN_PERCENTAGE_5">最近5天涨跌百分比</el-radio>
          <el-radio label="UP_DOWN_PERCENTAGE_10">最近10天涨跌百分比</el-radio>
          <el-radio label="UP_DOWN_PERCENTAGE_20">最近20天涨跌百分比</el-radio>
        </el-radio-group>
        <el-radio-group v-model="conceptBoardIndexTop5OrderByAscOrDesc"
          @change="changeConceptBoardIndexTop5OrderByAscOrDesc">
          <el-radio label="asc">升序</el-radio>
          <el-radio label="desc">降序</el-radio>
        </el-radio-group>

        <el-table :data="modelTopConceptBoardIndexDetailList" border style="width: 100%" stripe
          @row-click="handleModelTopConceptBoardIndexDetailRowClick" v-loading.fullscreen.lock="fullScreenLoading"
          :header-cell-style="{ background: '#004d8c', color: 'white', 'line-height': '50px', 'text-align': 'center' }">
          <el-table-column prop="Name" label="名称" width="100"> </el-table-column>
          <el-table-column prop="MyquantCode" label="myquant代码" width="80"> </el-table-column>
          <el-table-column prop="AkshareCode" label="akshare代码" width="80"> </el-table-column>
          <el-table-column prop="ClosePrice" label="当前指数" width="80"> </el-table-column>
          <el-table-column prop="UpDownPercentage2" label="最近2天涨跌百分比" width="100"> </el-table-column>
          <el-table-column prop="UpDownPercentage3" label="最近3天涨跌百分比" width="100"> </el-table-column>
          <el-table-column prop="UpDownPercentage4" label="最近4天涨跌百分比" width="100"> </el-table-column>
          <el-table-column prop="UpDownPercentage5" label="最近5天涨跌百分比" width="100"> </el-table-column>
          <el-table-column prop="UpDownPercentage10" label="最近10天涨跌百分比" width="100"> </el-table-column>
          <el-table-column prop="UpDownPercentage20" label="最近20天涨跌百分比" width="100"> </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper"
            :current-page="modelTopConceptBoardIndexDetailPaging.pageNo"
            :page-size="modelTopConceptBoardIndexDetailPaging.pageSize"
            :page-sizes="modelTopConceptBoardIndexDetailPaging.pageSizes"
            :total="modelTopConceptBoardIndexDetailPaging.pageTotal" :pager-count="5"
            @size-change="handleModelTopConceptBoardIndexDetailSizeChange"
            @current-change="handleModelTopConceptBoardIndexDetailPageChange">
          </el-pagination>
        </div>
      </el-col>

      <el-col :span="13">
        <el-radio-group v-model="conceptBoardIndexStockTop5OrderBy" @change="changeConceptBoardIndexStockTop5OrderBy">
          <el-radio label="UP_DOWN_PERCENTAGE_2">最近2天涨跌百分比</el-radio>
          <el-radio label="UP_DOWN_PERCENTAGE_3">最近3天涨跌百分比</el-radio>
          <el-radio label="UP_DOWN_PERCENTAGE_4">最近4天涨跌百分比</el-radio>
          <el-radio label="UP_DOWN_PERCENTAGE_5">最近5天涨跌百分比</el-radio>
          <el-radio label="UP_DOWN_PERCENTAGE_10">最近10天涨跌百分比</el-radio>
          <el-radio label="UP_DOWN_PERCENTAGE_20">最近20天涨跌百分比</el-radio>
        </el-radio-group>
        <el-radio-group v-model="conceptBoardIndexStockTop5OrderByAscOrDesc"
          @change="changeConceptBoardIndexStockTop5OrderByAscOrDesc">
          <el-radio label="asc">升序</el-radio>
          <el-radio label="desc">降序</el-radio>
        </el-radio-group>

        <el-table :data="relStockInfoConceptBoardList" border style="width: 100%" stripe
          @row-click="handleRelStockInfoConceptBoardRowClick"
          :header-cell-style="{ background: '#004d8c', color: 'white', 'line-height': '50px', 'text-align': 'center' }">
          <el-table-column prop="Name" label="名称" width="80"> </el-table-column>
          <el-table-column prop="MyquantCode" label="myquant代码" width="80"> </el-table-column>
          <el-table-column prop="AkshareCode" label="akshare代码" width="80"> </el-table-column>
          <el-table-column prop="ClosePrice" label="收盘价" width="80"> </el-table-column>
          <el-table-column prop="UpDownPercentage2" label="最近2天涨跌百分比" width="100"> </el-table-column>
          <el-table-column prop="UpDownPercentage3" label="最近3天涨跌百分比" width="100"> </el-table-column>
          <el-table-column prop="UpDownPercentage4" label="最近4天涨跌百分比" width="100"> </el-table-column>
          <el-table-column prop="UpDownPercentage5" label="最近5天涨跌百分比" width="100"> </el-table-column>
          <el-table-column prop="UpDownPercentage10" label="最近10天涨跌百分比" width="100"> </el-table-column>
          <el-table-column prop="UpDownPercentage20" label="最近20天涨跌百分比" width="100"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleStartTraining(scope.row)" type="text" size="small">开始训练</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper"
            :current-page="relStockInfoConceptBoardPaging.pageNo" :page-size="relStockInfoConceptBoardPaging.pageSize"
            :page-sizes="relStockInfoConceptBoardPaging.pageSizes" :total="relStockInfoConceptBoardPaging.pageTotal"
            :pager-count="5" @size-change="handleRelStockInfoConceptBoardSizeChange"
            @current-change="handleRelStockInfoConceptBoardPageChange">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-divider />

    <el-row>
      <el-col :span="12">
        概念板块【{{ conceptBoardName }}】K线图
        <div id="concept-board-index-kline-chart" style="width: 600px;height:400px;"></div>
      </el-col>
      <el-col :span="12">
        股票【{{ stockTransactionDataAllName }}】的K线图
        <div id="stock-transaction-data-all-kline-chart" style="width: 600px;height:400px;"></div>
      </el-col>
    </el-row>

    <el-divider />

    <el-row>
      <el-col :span="12">
        平均KD折线图
        <div id="average-kd-chart" style="width: 600px;height:400px;"></div>
      </el-col>
      <el-col :span="12">
        概念板块【{{ conceptBoardName }}】的KD折线图
        <div id="kd-chart" style="width: 600px;height:400px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import moment from 'moment';
import { pageModelTopConceptBoardIndexDetail } from "@/api/model_top_concept_board_index_detail_api.js";
import { pageRelStockInfoConceptBoard } from "@/api/rel_stock_info_concept_board_api.js";
import {
  previousDate, nextDate, findAverageKDByBeginDateAndEndDate, findKdByMyquantCodeAndBeginDateAndEndDate,
  findLatestConceptBoardIndex, findByMyquantCodeAndBeginDateAndEndDateOrderByTransactionDateAsc
} from "@/api/concept_board_index_api.js";
import { findByCodeBetweenDateOrderByDateAsc } from '@/api/stock_transaction_data_all_api.js';
import { add } from "@/api/training_api.js";
import { MarketType } from '@/components/constants.js';
import { beforeNMonth } from 'poseidon/datetime_util.esm.js';

export default {
  name: 'ConceptBoard',
  data() {
    return {
      /**
       * 日期
       */
      transactionDate: null,
      // transactionDate: new Date('2025-04-08'),
      /**
       * 概念板块表格，按照哪列排序
       */
      conceptBoardIndexTop5OrderBy: 'UP_DOWN_PERCENTAGE_2',
      /**
       * 概念板块表格排序，升序还是降序
       */
      conceptBoardIndexTop5OrderByAscOrDesc: 'desc',
      /**
       * 某一个概念板块前五名股票表格，按照哪列排序
       */
      conceptBoardIndexStockTop5OrderBy: 'UP_DOWN_PERCENTAGE_2',
      /**
       * 某一个概念板块前五名股票表格排序，升序还是降序
       */
      conceptBoardIndexStockTop5OrderByAscOrDesc: 'desc',
      /**
       * 是否全屏loading
       */
      fullScreenLoading: false,
      /**
       * 板块名称
       */
      conceptBoardName: null,
      /**
       * 股票名称
       */
      stockTransactionDataAllName: null,
      /**
       * 分页显示--概念板块前五名
       */
      modelTopConceptBoardIndexDetailPaging: {
        /**
         * 第几页
         */
        pageNo: 1,
        /**
         * 每页有几行
         */
        pageSize: 5,
        /**
         * 总记录数
         */
        pageTotal: 0,
        /**
         * 页码类型
         */
        pageSizes: [5, 10, 20, 30]
      },
      /**
       * 分页显示--每个概念板块的前五名
       */
      relStockInfoConceptBoardPaging: {
        /**
         * 第几页
         */
        pageNo: 1,
        /**
         * 每页有几行
         */
        pageSize: 5,
        /**
         * 总记录数
         */
        pageTotal: 0,
        /**
         * 页码类型
         */
        pageSizes: [5, 10, 20, 30]
      },
      /**
       * 概念板块近期数据
       */
      modelTopConceptBoardIndexDetailList: [],
      /**
       * 成份股数据
       */
      relStockInfoConceptBoardList: [],
      /**
       * 概念板块k线图对象
       */
      conceptBoardIndexKLineCharts: {
        /**
         * 日期列表
         */
        datetimeList: [],
        /**
         * 数据列表
         */
        dataList: [],
        /**
         * 成交量列表
         */
        volumnList: [],
      },
      /**
       * 股票k线图对象
       */
      stockTransactionDataAllKLineCharts: {
        /**
         * 日期列表
         */
        datetimeList: [],
        /**
         * 数据列表
         */
        dataList: [],
        /**
         * 成交量列表
         */
        volumnList: [],
      },
      /**
       * 平均KD折线图的配置
       */
      averageKDOption: {
        title: {
          text: '平均KD折线图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['平均K值', '平均D值']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '平均K值',
            type: 'line',
            data: []
          },
          {
            name: '平均D值',
            type: 'line',
            data: []
          }
        ],
        color: ['red', 'blue']
      },
      /**
       * 板块KD折线图的配置
       */
      kdOption: {
        title: {
          text: '板块KD折线图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['K值', 'D值']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'K值',
            type: 'line',
            data: []
          },
          {
            name: 'D值',
            type: 'line',
            data: []
          }
        ],
        color: ['brown', 'green']
      },
    }
  },
  mounted() {
    // 设置显示的日期
    findLatestConceptBoardIndex().then((res) => {
      this.transactionDate = res.data.Result.TransactionDate;

      this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
      this.createAverageKDChart();
    });
  },
  methods: {
    /**
     * 分页显示--概念板块前五名
     * 分页显示--每个概念板块的前五名
     * 创建板块KD图
     * 创建板块K线图
     * 创建股票K线图
     */
    loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart() {
      console.log("调用方法loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart");

      this.fullScreenLoading = true;

      const _transactionDate = moment(this.transactionDate).format('YYYY-MM-DD');
      let param = {
        orderByColumnArray: [
          {
            columnName: this.conceptBoardIndexTop5OrderBy,
            ascOrDesc: this.conceptBoardIndexTop5OrderByAscOrDesc
          }
        ],
        transactionDate: _transactionDate,
        pageSize: this.modelTopConceptBoardIndexDetailPaging.pageSize,
        pageNo: this.modelTopConceptBoardIndexDetailPaging.pageNo
      };
      // 分页显示--概念板块前五名
      pageModelTopConceptBoardIndexDetail(param).then((res) => {
        this.modelTopConceptBoardIndexDetailList = res.data.Result.Data;
        this.modelTopConceptBoardIndexDetailPaging.pageTotal = res.data.Result.Total;

        this.conceptBoardName = this.conceptBoardName || this.modelTopConceptBoardIndexDetailList[0].Name;

        const _transactionDate = moment(this.transactionDate).format('YYYY-MM-DD');
        let param = {
          orderByColumnArray: [
            {
              columnName: this.conceptBoardIndexStockTop5OrderBy,
              ascOrDesc: this.conceptBoardIndexStockTop5OrderByAscOrDesc
            }
          ],
          conceptBoardName: this.modelTopConceptBoardIndexDetailList[0].Name,
          transactionDate: _transactionDate,
          pageSize: this.relStockInfoConceptBoardPaging.pageSize,
          pageNo: this.relStockInfoConceptBoardPaging.pageNo
        };
        // 分页显示--每个概念板块的前五名
        pageRelStockInfoConceptBoard(param).then((res) => {
          this.relStockInfoConceptBoardList = res.data.Result.Data;
          this.relStockInfoConceptBoardPaging.pageTotal = res.data.Result.Total;

          // 创建股票K线图
          this.stockTransactionDataAllName = this.relStockInfoConceptBoardList[0].Name;
          let beginDate = beforeNMonth(_transactionDate);
          beginDate = moment(beginDate).format('YYYY-MM-DD');
          this.createStockTransactionDataAllChart(this.relStockInfoConceptBoardList[0].Code, beginDate, _transactionDate)

          this.fullScreenLoading = false;
        });
        // 创建板块KD图
        this.createKDChart(this.modelTopConceptBoardIndexDetailList[0].MyquantCode);
        // 创建板块K线图
        let beginDate = beforeNMonth(_transactionDate);
        beginDate = moment(beginDate).format('YYYY-MM-DD');
        this.createConceptBoardIndexChart(this.modelTopConceptBoardIndexDetailList[0].MyquantCode, beginDate, _transactionDate);
      });
    },
    /**
     * 创建板块K线图和股票K线图
     */
    createConceptBoardIndexChart(myquantCode, beginDate, endDate) {
      console.log("调用方法createConceptBoardIndexChart");

      const params = {
        "MyquantCode": myquantCode,
        "BeginDate": beginDate,
        "EndDate": endDate
      };

      // 根据myquant_code、begin_date和end_date，查询记录，并按照transaction_date列升序排列
      findByMyquantCodeAndBeginDateAndEndDateOrderByTransactionDateAsc(params).then((res) => {
        if (null != res.data.Result && res.data.Result.length > 0) {
          let _datetimeList = [];
          let _dataList = [];
          let _volumnList = [];
          for (var i = 0; i < res.data.Result.length; i++) {
            const conceptBoardIndex = res.data.Result[i];
            _datetimeList.push(conceptBoardIndex.TransactionDate);
            _dataList.push([conceptBoardIndex.OpenPrice, conceptBoardIndex.ClosePrice, conceptBoardIndex.HighestPrice, conceptBoardIndex.LowestPrice]);
            _volumnList.push([conceptBoardIndex.TransactionDate, conceptBoardIndex.Turnover, conceptBoardIndex.ClosePrice > conceptBoardIndex.OpenPrice ? -1 : 1]);
          }
          this.conceptBoardIndexKLineCharts.datetimeList = _datetimeList;
          this.conceptBoardIndexKLineCharts.dataList = _dataList;
          this.conceptBoardIndexKLineCharts.volumnList = _volumnList;

          let chartDom = document.getElementById('concept-board-index-kline-chart');
          let myChart = echarts.init(chartDom);
          myChart.setOption(this.getConceptBoardIndexKLineOption());
        } else {
          console.log('调用接口/adam4/api/v1/conceptBoardIndex/findByMyquantCodeAndBeginDateAndEndDateOrderByTransactionDateAsc返回值为空');
        }
      });
    },
    /**
     * 创建股票K线图
     */
    createStockTransactionDataAllChart(code, beginDate, endDate) {
      console.log("调用方法createStockTransactionDataAllChart");

      const params = {
        "Code": code,
        "BeginDate": beginDate,
        "EndDate": endDate
      };

      // 根据code、begin_date和end_date，查询记录，并按照date列升序排列
      findByCodeBetweenDateOrderByDateAsc(params).then((res) => {
        if (null != res.data.Result && res.data.Result.length > 0) {
          let _datetimeList = [];
          let _dataList = [];
          let _volumnList = [];
          for (var i = 0; i < res.data.Result.length; i++) {
            const stockTransactionDataAll = res.data.Result[i];
            _datetimeList.push(stockTransactionDataAll.Date);
            _dataList.push([stockTransactionDataAll.OpenPrice, stockTransactionDataAll.ClosePrice, stockTransactionDataAll.HighestPrice, stockTransactionDataAll.LowestPrice]);
            _volumnList.push([stockTransactionDataAll.Date, stockTransactionDataAll.Turnover, stockTransactionDataAll.ClosePrice > stockTransactionDataAll.OpenPrice ? -1 : 1]);
          }
          this.stockTransactionDataAllKLineCharts.datetimeList = _datetimeList;
          this.stockTransactionDataAllKLineCharts.dataList = _dataList;
          this.stockTransactionDataAllKLineCharts.volumnList = _volumnList;

          let chartDom = document.getElementById('stock-transaction-data-all-kline-chart');
          let myChart = echarts.init(chartDom);
          myChart.setOption(this.getStockTransactionDataAllKLineOption());
        } else {
          console.log('调用接口/adam4/api/v1/stockTransactionDataAll/findByCodeBetweenDateOrderByDateAsc返回值为空');
        }
      });
    },
    /**
     * 平均KD创建折线图
     */
    createAverageKDChart() {
      console.log("调用方法createAverageKDChart");

      let beginTime = new Date(Date.parse(this.transactionDate));
      beginTime.setMonth(beginTime.getMonth() - 6);
      let _beginTime = moment(beginTime).format('YYYY-MM-DD HH:mm:ss');
      let _endTime = moment(this.transactionDate).format('YYYY-MM-DD HH:mm:ss');

      findAverageKDByBeginDateAndEndDate({ "beginTime": _beginTime, "endTime": _endTime }).then((res) => {
        this.averageKDOption.xAxis.data = res.data.Result.TransactionDateArray;
        this.averageKDOption.series[0].data = res.data.Result.KArray;
        this.averageKDOption.series[1].data = res.data.Result.DArray;

        let chartDom = document.getElementById('average-kd-chart');
        let myChart = echarts.init(chartDom);
        myChart.setOption(this.averageKDOption);
      });
    },
    /**
     * 板块KD创建折线图
     */
    createKDChart(myquantCode) {
      console.log("调用方法createKDChart");

      let beginTime = new Date(Date.parse(this.transactionDate));
      beginTime.setMonth(beginTime.getMonth() - 6);
      let _beginTime = moment(beginTime).format('YYYY-MM-DD HH:mm:ss');
      let _endTime = moment(this.transactionDate).format('YYYY-MM-DD HH:mm:ss');

      findKdByMyquantCodeAndBeginDateAndEndDate({ "myquantCode": myquantCode, "beginTime": _beginTime, "endTime": _endTime }).then((res) => {
        this.kdOption.xAxis.data = res.data.Result.TransactionDateArray;
        this.kdOption.series[0].data = res.data.Result.KArray;
        this.kdOption.series[1].data = res.data.Result.DArray;

        let chartDom = document.getElementById('kd-chart');
        let myChart = echarts.init(chartDom);
        myChart.setOption(this.kdOption);
      });
    },
    /**
     * 改变日期时触发
     */
    changeTransactionDate(params) {
      console.log("调用方法changeTransactionDate");

      this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
      this.createAverageKDChart();
    },
    /**
     * 点击前一天按钮
     */
    handlePreviousDate() {
      const _transactionDate = moment(this.transactionDate).format('YYYY-MM-DD');

      previousDate(_transactionDate).then((res) => {
        this.transactionDate = res.data.Result;

        this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
        this.createAverageKDChart();
      });
    },
    /**
     * 点击后一天按钮
     */
    handleNextDate() {
      const _transactionDate = moment(this.transactionDate).format('YYYY-MM-DD');

      nextDate(_transactionDate).then((res) => {
        this.transactionDate = res.data.Result;

        this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
        this.createAverageKDChart();
      });
    },
    /**
     * 概念板块表格哪列排序单选按钮改变
     */
    changeConceptBoardIndexTop5OrderBy(label) {
      this.conceptBoardIndexTop5OrderBy = label;

      this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
      this.createAverageKDChart();
    },
    /**
     * 概念板块升序/降序排列单选按钮改变
     */
    changeConceptBoardIndexTop5OrderByAscOrDesc(label) {
      this.conceptBoardIndexTop5OrderByAscOrDesc = label;

      this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
      this.createAverageKDChart();
    },
    /**
     * 概念板块前五名，当某一行被点击时会触发该事件
     */
    handleModelTopConceptBoardIndexDetailRowClick(row, column, event) {
      this.fullScreenLoading = true;

      const _transactionDate = moment(this.transactionDate).format('YYYY-MM-DD');
      let param = {
        orderByColumnArray: [
          {
            columnName: this.conceptBoardIndexTop5OrderBy,
            ascOrDesc: this.conceptBoardIndexTop5OrderByAscOrDesc
          }
        ],
        conceptBoardMyquantCode: row.MyquantCode,
        transactionDate: _transactionDate,
        pageSize: this.relStockInfoConceptBoardPaging.pageSize,
        pageNo: this.relStockInfoConceptBoardPaging.pageNo
      };

      this.conceptBoardName = row.Name;
      pageRelStockInfoConceptBoard(param).then((res) => {
        this.relStockInfoConceptBoardList = res.data.Result.Data;
        this.relStockInfoConceptBoardPaging.pageTotal = res.data.Result.Total;

        this.createKDChart(row.MyquantCode);

        // 创建板块K线图
        let beginDate = beforeNMonth(this.transactionDate);
        beginDate = moment(beginDate).format('YYYY-MM-DD');
        this.createConceptBoardIndexChart(this.modelTopConceptBoardIndexDetailList[0].MyquantCode, beginDate, this.transactionDate);

        // 创建股票K线图
        this.stockTransactionDataAllName = this.relStockInfoConceptBoardList[0].Name;
        this.createStockTransactionDataAllChart(this.relStockInfoConceptBoardList[0].Code, beginDate, this.transactionDate)

        this.fullScreenLoading = false;
      });
    },
    /**
     * 某一个概念板块的前五名股票，当某一行被点击时会触发该事件
     * @param row 
     * @param column 
     * @param event 
     */
    handleRelStockInfoConceptBoardRowClick(row, column, event) {
      this.fullScreenLoading = true;

      // 创建股票K线图
      this.stockTransactionDataAllName = row.Name;
      let beginDate = beforeNMonth(this.transactionDate);
      beginDate = moment(beginDate).format('YYYY-MM-DD');
      let endDate = moment(this.transactionDate).format('YYYY-MM-DD');
      this.createStockTransactionDataAllChart(row.Code, beginDate, endDate);

      this.fullScreenLoading = false;
    },
    /**
     * 某一个概念板块前五名股票表格哪列排序单选按钮改变
     */
    changeConceptBoardIndexStockTop5OrderBy(label) {
      this.conceptBoardIndexStockTop5OrderBy = label;

      this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
      this.createAverageKDChart();
    },
    /**
     * 某一个概念板块前五名股票升序/降序排列单选按钮改变
     */
    changeConceptBoardIndexStockTop5OrderByAscOrDesc(label) {
      this.conceptBoardIndexStockTop5OrderByAscOrDesc = label;

      this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
      this.createAverageKDChart();
    },
    /**
     * 概念板块前五名，点击下一页时
     * @param currentPage 
     */
    handleModelTopConceptBoardIndexDetailPageChange(currentPage) {
      this.conceptBoardName = undefined;
      this.modelTopConceptBoardIndexDetailPaging.pageNo = currentPage
      this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
    },
    /**
     * 概念板块前五名，每一页的行数变化时
     * @param pageSize 
     */
    handleModelTopConceptBoardIndexDetailSizeChange(pageSize) {
      this.modelTopConceptBoardIndexDetailPaging.pageSize = pageSize
      this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
    },
    /**
     * 每个概念板块的前五名，点击下一页时
     * @param currentPage 
     */
    handleRelStockInfoConceptBoardPageChange(currentPage) {
      this.relStockInfoConceptBoardPaging.pageNo = currentPage
      this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
    },
    /**
     * 每个概念板块的前五名，每一页的行数变化时
     * @param pageSize 
     */
    handleRelStockInfoConceptBoardSizeChange(pageSize) {
      this.relStockInfoConceptBoardPaging.pageSize = pageSize
      this.loadAllPageAndCreateKDChartAndConceptBoardIndexKLineChartAndStockTransactionDataAllKLineChart();
    },
    /**
     * 开始训练
     */
    handleStartTraining(row) {
      let endDate = this.transactionDate;
      let beginDate = new Date(Date.parse(this.transactionDate))
      let lastYear = beginDate.getFullYear() - 1;
      beginDate.setFullYear(lastYear);

      let param = {
        name: "感念板块股票训练 " + row.Name + " " + row.MyquantCode + " " + moment(new Date()).format('YYYY-MM-DD'),
        market: MarketType.STOCK_MARKET,
        myquantcode: row.MyquantCode,
        beginDate: moment(beginDate).format('YYYY-MM-DD'),
        endDate: moment(endDate).format('YYYY-MM-DD'),
      };

      let that = this;
      that.transactionName = param.name;

      add(param).then((res) => {
        if (res.data.Success == true) {
          that.$store.commit("changeActiveIndexInNavigationBar", "2");
          that.$router.push({
            name: "Transaction",
            query: { name: that.transactionName },
          });
        } else {
          const message = `调用接口/api/v1/trainingInfo/add报错：${res.data.Message}`;
          console.error(message);
          this.$message({
            message: message,
            type: 'warning'
          });
        }
        that.dialogVisible = false;
      });
    },
    /**
     * 概念板块K线图的配置
     */
    getConceptBoardIndexKLineOption() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            link: { xAxisIndex: 'all' },//上下划过分开展示还是一起展示
          },
          textStyle: {
            color: '#000'
          },
          formatter: function (params) {//修改鼠标划过显示为中文
            if (params[0].componentSubType == "candlestick") {//先划过蜡烛图
              var params1 = params[0];//开盘收盘最低最高数据汇总
              var params2 = params[1].data[1];//成交量数据

            } else if (params[0].componentSubType == "bar") {//先划过成交量
              var params1 = params[1];//开盘收盘最低最高数据汇总
              var params2 = params[0].data[1];//成交量数据

            }
            var currentItemData = params1.data;//k线数据
            return params1.name + '<br>' +
              '开盘价:' + currentItemData[1] + '<br>' +
              '收盘价:' + currentItemData[2] + '<br>' +
              '最低价:' + currentItemData[3] + '<br>' +
              '最高价:' + currentItemData[4] + '<br>' +
              '成交量:' + params2
          }
          // extraCssText: 'width: 170px'
        },
        axisPointer: {
          link: { xAxisIndex: 'all' },//整体划过还是单个划过
          label: {
            backgroundColor: '#777'
          }
        },
        visualMap: {//视觉映射组，就是将数据映射到视觉元素
          show: false,
          seriesIndex: 1,//指定取哪个系列的数据，第几个图形的数据，从0开始，1代表的是成交量的柱状图
          pieces: [{//自定义『分段式视觉映射组件』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
            value: 1,//value值为1则用'#00da3c'颜色的样式
            color: '#00da3c'
          }, {
            value: -1,
            color: '#ec0000'
          }]
        },
        grid: [
          {//蜡烛图的位置
            left: '10%',
            right: '8%',
            height: '50%'
          },
          {//成交量柱状图的位置
            left: '10%',
            right: '8%',
            top: '63%',
            height: '16%'
          }
        ],
        xAxis: [
          {//蜡烛图的设置
            type: 'category',
            data: this.conceptBoardIndexKLineCharts.datetimeList,
            scale: true,
            //boundaryGap: false,
            axisLine: { onZero: false },
            splitLine: { show: false },
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax',
            axisPointer: {
              z: 100
            },
          },
          {//成交量柱状图的设置
            type: 'category',
            gridIndex: 1,
            data: this.conceptBoardIndexKLineCharts.datetimeList,
            scale: true,
            //boundaryGap: false,
            axisLine: { onZero: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
          }
        ],
        yAxis: [
          {
            scale: true,
            splitArea: {
              show: true
            }
          },
          {
            scale: true,
            gridIndex: 1,
            splitNumber: 2,
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false }
          }
        ],
        series: [{//蜡烛图的设置
          type: 'candlestick',
          data: this.conceptBoardIndexKLineCharts.dataList,
          barWidth: 6,//图形的宽度
          itemStyle: {
            color: '#ec0000',
            color0: '#00da3c',
            borderColor: null,
            borderColor0: null
          },
        },
        {//成交量柱状图的设置
          name: 'Volume',
          type: 'bar',
          barWidth: 6,//柱状图的宽度
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: this.conceptBoardIndexKLineCharts.volumnList
        }
        ]
      }
    },
    /**
     * 股票K线图的配置
     */
    getStockTransactionDataAllKLineOption() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            link: { xAxisIndex: 'all' },//上下划过分开展示还是一起展示
          },
          textStyle: {
            color: '#000'
          },
          formatter: function (params) {//修改鼠标划过显示为中文
            if (params[0].componentSubType == "candlestick") {//先划过蜡烛图
              var params1 = params[0];//开盘收盘最低最高数据汇总
              var params2 = params[1].data[1];//成交量数据

            } else if (params[0].componentSubType == "bar") {//先划过成交量
              var params1 = params[1];//开盘收盘最低最高数据汇总
              var params2 = params[0].data[1];//成交量数据

            }
            var currentItemData = params1.data;//k线数据
            return params1.name + '<br>' +
              '开盘价:' + currentItemData[1] + '<br>' +
              '收盘价:' + currentItemData[2] + '<br>' +
              '最低价:' + currentItemData[3] + '<br>' +
              '最高价:' + currentItemData[4] + '<br>' +
              '成交量:' + params2
          }
          // extraCssText: 'width: 170px'
        },
        axisPointer: {
          link: { xAxisIndex: 'all' },//整体划过还是单个划过
          label: {
            backgroundColor: '#777'
          }
        },
        visualMap: {//视觉映射组，就是将数据映射到视觉元素
          show: false,
          seriesIndex: 1,//指定取哪个系列的数据，第几个图形的数据，从0开始，1代表的是成交量的柱状图
          pieces: [{//自定义『分段式视觉映射组件』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
            value: 1,//value值为1则用'#00da3c'颜色的样式
            color: '#00da3c'
          }, {
            value: -1,
            color: '#ec0000'
          }]
        },
        grid: [
          {//蜡烛图的位置
            left: '10%',
            right: '8%',
            height: '50%'
          },
          {//成交量柱状图的位置
            left: '10%',
            right: '8%',
            top: '63%',
            height: '16%'
          }
        ],
        xAxis: [
          {//蜡烛图的设置
            type: 'category',
            data: this.stockTransactionDataAllKLineCharts.datetimeList,
            scale: true,
            //boundaryGap: false,
            axisLine: { onZero: false },
            splitLine: { show: false },
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax',
            axisPointer: {
              z: 100
            },
          },
          {//成交量柱状图的设置
            type: 'category',
            gridIndex: 1,
            data: this.stockTransactionDataAllKLineCharts.datetimeList,
            scale: true,
            //boundaryGap: false,
            axisLine: { onZero: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
          }
        ],
        yAxis: [
          {
            scale: true,
            splitArea: {
              show: true
            }
          },
          {
            scale: true,
            gridIndex: 1,
            splitNumber: 2,
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false }
          }
        ],
        series: [{//蜡烛图的设置
          type: 'candlestick',
          data: this.stockTransactionDataAllKLineCharts.dataList,
          barWidth: 6,//图形的宽度
          itemStyle: {
            color: '#ec0000',
            color0: '#00da3c',
            borderColor: null,
            borderColor0: null
          },
        },
        {//成交量柱状图的设置
          name: 'Volume',
          type: 'bar',
          barWidth: 6,//柱状图的宽度
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: this.stockTransactionDataAllKLineCharts.volumnList
        }
        ]
      }
    },
  }
}
</script>

<style scoped>
.main {
  /* background-color: #e9eef3; */
  background-color: white;
}
</style>
